<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>“样品跟踪分析系统”项目管理信息图</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!--
    Palette Selection: Energetic & Playful (#0A2463, #3E92CC, #D8315B, #F4E285, #FFFFFF)
    Narrative Plan:
    1. Introduction (The "Why"): Project goals and KPIs.
    2. The Plan (The "How"): Budget, Team Structure.
    3. The Blueprint (The "What"): WBS and Technology Stack.
    4. Managing Uncertainty (The "What If"): Risk Assessment.
    5. The Process (The "Workflow"): Project Timeline.
    6. Conclusion: Future potential.

    Visualization Plan:
    - KPIs: Single Big Number (Inform) - Implemented with styled HTML. Justification: Maximum impact for key metrics. NO SVG.
    - Budget: Donut Chart (Compare) - Implemented with Chart.js. Justification: Clear composition of a whole. NO SVG.
    - Team: Structured HTML/CSS Cards (Organize) - Implemented with Tailwind. Justification: Clarity and space for details. NO SVG.
    - WBS: Nested HTML/CSS List (Organize) - Implemented with Tailwind. Justification: Best for hierarchical text. NO SVG.
    - Risks: Ordered Bar Chart (Organize/Rank) - Implemented with Chart.js. Justification: Highlights high-priority items effectively. NO SVG.
    - Timeline: HTML/CSS Flow Diagram (Change) - Implemented with Tailwind. Justification: Intuitive for chronological process. NO SVG.

    Confirmation: NEITHER Mermaid JS NOR SVG were used in this output. All visualizations are either Chart.js (Canvas) or structured HTML/CSS.
    -->
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 300px;
            max-height: 400px;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 350px;
            }
        }
        .bg-primary { background-color: #0A2463; }
        .bg-secondary { background-color: #3E92CC; }
        .bg-accent { background-color: #D8315B; }
        .bg-highlight { background-color: #F4E285; }
        .text-primary { color: #0A2463; }
        .text-secondary { color: #3E92CC; }
        .text-accent { color: #D8315B; }
        .text-highlight { color: #F4E285; }
        .border-primary { border-color: #0A2463; }
        .border-secondary { border-color: #3E92CC; }
    </style>
</head>
<body class="bg-gray-100 text-gray-800">

<div class="container mx-auto p-4 md:p-8">

    <!-- Header -->
    <header class="text-center mb-12">
        <h1 class="text-4xl md:text-5xl font-bold text-primary mb-2">样品跟踪分析系统</h1>
        <p class="text-xl md:text-2xl text-secondary font-light">项目管理核心要素概览</p>
    </header>

    <!-- Section 1: Project Goals -->
    <section id="goals" class="mb-16">
        <h2 class="text-3xl font-bold text-primary text-center mb-8">项目核心目标：驱动业务增长</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="bg-white rounded-lg shadow-lg p-8 text-center flex flex-col justify-center items-center transform hover:scale-105 transition-transform duration-300">
                <p class="text-lg text-gray-600 mb-2">预期订单转化率提升</p>
                <p class="text-6xl font-bold text-accent">+15%</p>
                <p class="mt-4 text-gray-500">通过精准的客户意向洞察和优化的销售策略，显著提高从样品到订单的转化效率。</p>
            </div>
            <div class="bg-white rounded-lg shadow-lg p-8 text-center flex flex-col justify-center items-center transform hover:scale-105 transition-transform duration-300">
                <p class="text-lg text-gray-600 mb-2">预期人工成本降低</p>
                <p class="text-6xl font-bold text-accent">>20%</p>
                <p class="mt-4 text-gray-500">用系统化、自动化的跟踪分析取代低效的人工跟进，节约宝贵的人力资源。</p>
            </div>
        </div>
    </section>

    <!-- Section 2: Plan (Budget & Team) -->
    <section id="plan" class="mb-16">
        <h2 class="text-3xl font-bold text-primary text-center mb-8">周详计划：资源与团队</h2>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
            <!-- Budget -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h3 class="text-2xl font-semibold mb-4 text-center text-secondary">项目预算分配</h3>
                <div class="chart-container h-64 md:h-80">
                    <canvas id="budgetChart"></canvas>
                </div>
                <p class="mt-4 text-center text-gray-600">预算结构清晰，重点投入于核心开发人力，同时为外部合作和未知风险预留资源。</p>
            </div>

            <!-- Team -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h3 class="text-2xl font-semibold mb-6 text-center text-secondary">核心团队构成</h3>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 text-center">
                    <div class="p-3 bg-blue-50 rounded-lg">
                        <p class="font-bold text-primary">罗建琼</p>
                        <p class="text-sm text-gray-600">项目经理</p>
                    </div>
                    <div class="p-3 bg-blue-50 rounded-lg">
                        <p class="font-bold text-primary">刘海峰</p>
                        <p class="text-sm text-gray-600">产品经理</p>
                    </div>
                    <div class="p-3 bg-blue-50 rounded-lg">
                        <p class="font-bold text-primary">严山清</p>
                        <p class="text-sm text-gray-600">需求分析师</p>
                    </div>
                    <div class="p-3 bg-blue-50 rounded-lg">
                        <p class="font-bold text-primary">郑森杰</p>
                        <p class="text-sm text-gray-600">后端工程师</p>
                    </div>
                    <div class="p-3 bg-blue-50 rounded-lg">
                        <p class="font-bold text-primary">肖立豪</p>
                        <p class="text-sm text-gray-600">前端工程师</p>
                    </div>
                    <div class="p-3 bg-blue-50 rounded-lg">
                        <p class="font-bold text-primary">莫国庆</p>
                        <p class="text-sm text-gray-600">测试运维工程师</p>
                    </div>
                </div>
                <p class="mt-6 text-center text-gray-600">职责明确的跨职能团队是项目成功的基石，确保各环节专业、高效。</p>
            </div>
        </div>
    </section>

    <!-- Section 3: Blueprint (WBS & Tech Stack) -->
    <section id="blueprint" class="mb-16">
        <h2 class="text-3xl font-bold text-primary text-center mb-8">项目蓝图：范围与技术</h2>
        <div class="bg-white rounded-lg shadow-lg p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- WBS -->
            <div>
                <h3 class="text-2xl font-semibold mb-4 text-secondary">工作分解结构 (WBS)</h3>
                <p class="mb-4 text-gray-600">通过结构化分解，将复杂的项目目标转化为清晰、可管理的任务单元。</p>
                <ul class="space-y-2 text-sm">
                    <li class="font-bold">1.0 项目管理</li>
                    <li class="font-bold">2.0 需求分析与规划
                        <ul class="pl-4 font-normal border-l-2 border-secondary ml-2">
                            <li>2.1 需求调研</li>
                            <li>2.2 编写需求规格说明书</li>
                            <li>2.3 原型设计与评审</li>
                        </ul>
                    </li>
                    <li class="font-bold">3.0 系统设计与架构</li>
                    <li class="font-bold">4.0 开发与测试
                        <ul class="pl-4 font-normal border-l-2 border-secondary ml-2">
                            <li>4.1 后端开发</li>
                            <li>4.2 前端开发</li>
                            <li>4.3-4.5 各阶段测试</li>
                        </ul>
                    </li>
                    <li class="font-bold">5.0 部署与上线</li>
                    <li class="font-bold">6.0 运营与维护</li>
                </ul>
            </div>
            <!-- Tech Stack -->
            <div>
                <h3 class="text-2xl font-semibold mb-4 text-secondary">核心技术栈</h3>
                <p class="mb-4 text-gray-600">采用现代化、成熟的技术栈，确保系统的高性能、高可用性和未来的可扩展性。</p>
                <div class="flex flex-wrap gap-3">
                    <span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">敏捷开发</span>
                    <span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">微服务架构</span>
                    <span class="bg-secondary text-white px-3 py-1 rounded-full text-sm font-medium">Spring Cloud</span>
                    <span class="bg-secondary text-white px-3 py-1 rounded-full text-sm font-medium">Vue.js 3</span>
                    <span class="bg-secondary text-white px-3 py-1 rounded-full text-sm font-medium">ElementUI</span>
                    <span class="bg-highlight text-primary px-3 py-1 rounded-full text-sm font-medium">ECharts</span>
                    <span class="bg-highlight text-primary px-3 py-1 rounded-full text-sm font-medium">Redis</span>
                    <span class="bg-gray-200 text-gray-800 px-3 py-1 rounded-full text-sm font-medium">Selenium</span>
                    <span class="bg-gray-200 text-gray-800 px-3 py-1 rounded-full text-sm font-medium">JUnit</span>
                    <span class="bg-accent text-white px-3 py-1 rounded-full text-sm font-medium">AI预测模型</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Section 4: Risk Management -->
    <section id="risks" class="mb-16">
        <h2 class="text-3xl font-bold text-primary text-center mb-8">风险管理：预见与应对</h2>
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-2xl font-semibold mb-4 text-center text-secondary">主要风险评估与优先级</h3>
            <p class="text-center text-gray-600 mb-6">主动识别并评估潜在风险，按优先级制定应对策略，是确保项目平稳运行的关键。</p>
            <div class="chart-container h-80 md:h-96">
                <canvas id="riskChart"></canvas>
            </div>
        </div>
    </section>

    <!-- Section 5: Timeline -->
    <section id="timeline" class="mb-16">
        <h2 class="text-3xl font-bold text-primary text-center mb-8">项目时间轴：关键里程碑</h2>
        <div class="relative wrap overflow-hidden p-4 md:p-10 h-full">
            <div class="absolute border-opacity-20 border-secondary h-full border" style="left: 50%"></div>

            <!-- Phase 1 -->
            <div class="mb-8 flex justify-between items-center w-full right-timeline">
                <div class="order-1 w-5/12"></div>
                <div class="z-20 flex items-center order-1 bg-accent shadow-xl w-8 h-8 rounded-full">
                    <h1 class="mx-auto font-semibold text-lg text-white">1</h1>
                </div>
                <div class="order-1 bg-secondary rounded-lg shadow-xl w-5/12 px-6 py-4">
                    <h3 class="font-bold text-white text-lg">需求与规划</h3>
                    <p class="text-sm leading-snug tracking-wide text-blue-100">2025-05-20 ~ 2025-06-08</p>
                    <p class="text-xs text-blue-200 mt-1">产出：需求规格说明书、系统原型</p>
                </div>
            </div>

            <!-- Phase 2 -->
            <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
                <div class="order-1 w-5/12"></div>
                <div class="z-20 flex items-center order-1 bg-accent shadow-xl w-8 h-8 rounded-full">
                    <h1 class="mx-auto text-white font-semibold text-lg">2</h1>
                </div>
                <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
                    <h3 class="font-bold text-white text-lg">设计与架构</h3>
                    <p class="text-sm leading-snug tracking-wide text-blue-200">2025-06-09 ~ 2025-06-25</p>
                    <p class="text-xs text-blue-300 mt-1">产出：系统设计文档、数据库设计</p>
                </div>
            </div>

            <!-- Phase 3 -->
            <div class="mb-8 flex justify-between items-center w-full right-timeline">
                <div class="order-1 w-5/12"></div>
                <div class="z-20 flex items-center order-1 bg-accent shadow-xl w-8 h-8 rounded-full">
                    <h1 class="mx-auto font-semibold text-lg text-white">3</h1>
                </div>
                <div class="order-1 bg-secondary rounded-lg shadow-xl w-5/12 px-6 py-4">
                    <h3 class="font-bold text-white text-lg">开发与测试</h3>
                    <p class="text-sm leading-snug tracking-wide text-blue-100">2025-06-26 ~ 2025-08-18</p>
                    <p class="text-xs text-blue-200 mt-1">产出：可运行系统模块、测试报告</p>
                </div>
            </div>

            <!-- Phase 4 -->
            <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
                <div class="order-1 w-5/12"></div>
                <div class="z-20 flex items-center order-1 bg-accent shadow-xl w-8 h-8 rounded-full">
                    <h1 class="mx-auto text-white font-semibold text-lg">4</h1>
                </div>
                <div class="order-1 bg-primary rounded-lg shadow-xl w-5/12 px-6 py-4">
                    <h3 class="font-bold text-white text-lg">部署与上线</h3>
                    <p class="text-sm leading-snug tracking-wide text-blue-200">2025-08-19 ~ 2025-08-30</p>
                    <p class="text-xs text-blue-300 mt-1">产出：系统正式上线运行</p>
                </div>
            </div>

        </div>
    </section>

    <!-- Footer -->
    <footer class="text-center mt-12 py-6 border-t border-gray-300">
        <p class="text-gray-600">该信息图基于《样品跟踪分析系统软件项目管理课程设计报告》生成。</p>
        <p class="text-sm text-gray-400 mt-2">© 2025 项目团队</p>
    </footer>

</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const tooltipTitleCallback = (tooltipItems) => {
            const item = tooltipItems[0];
            let label = item.chart.data.labels[item.dataIndex];
            if (Array.isArray(label)) {
                return label.join(' ');
            }
            return label;
        };

        const commonTooltipConfig = {
            plugins: {
                tooltip: {
                    callbacks: {
                        title: tooltipTitleCallback
                    }
                }
            }
        };

        const wrapLabel = (str, maxWidth) => {
            if (str.length <= maxWidth) {
                return str;
            }
            let lines = [];
            let currentLine = '';
            for(let i=0; i < str.length; i++) {
                currentLine += str[i];
                if (currentLine.length >= maxWidth) {
                    lines.push(currentLine);
                    currentLine = '';
                }
            }
            if (currentLine) {
                lines.push(currentLine);
            }
            return lines;
        };

        // Budget Chart
        const budgetCtx = document.getElementById('budgetChart').getContext('2d');
        new Chart(budgetCtx, {
            type: 'doughnut',
            data: {
                labels: ['人力成本', '软件/硬件 (云资源)', '数据采购 (外部合作)', '其他 (应急/培训)'],
                datasets: [{
                    data: [60, 20, 10, 10],
                    backgroundColor: ['#3E92CC', '#0A2463', '#F4E285', '#D8315B'],
                    borderColor: '#FFFFFF',
                    borderWidth: 3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                    },
                    tooltip: commonTooltipConfig.plugins.tooltip
                },
                cutout: '60%'
            }
        });

        // Risk Chart
        const riskCtx = document.getElementById('riskChart').getContext('2d');
        new Chart(riskCtx, {
            type: 'bar',
            data: {
                labels: [
                    wrapLabel('客户意向评分模型准确性低', 10),
                    wrapLabel('用户采纳度低', 10),
                    wrapLabel('数据质量低', 10),
                    wrapLabel('项目进度延期', 10),
                    wrapLabel('外部数据集成不稳定', 10),
                    wrapLabel('团队成员流失', 10)
                ],
                datasets: [{
                    label: '风险等级',
                    data: [10, 9, 8, 7, 6, 4],
                    backgroundColor: [
                        '#D8315B', // High
                        '#D8315B', // High
                        '#D8315B', // High
                        '#F4E285', // Medium
                        '#F4E285', // Medium
                        '#3E92CC'  // Low
                    ],
                    borderColor: [
                        '#D8315B',
                        '#D8315B',
                        '#D8315B',
                        '#F4E285',
                        '#F4E285',
                        '#3E92CC'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '风险影响与概率综合评分 (越高越优先)'
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: commonTooltipConfig.plugins.tooltip
                }
            }
        });
    });
</script>
</body>
</html>
